<template>
  <div class="users">
     <header>
       <router-link to="./"><span>< 首页</span></router-link>
       <span>相册</span>
     </header>
     <section>
       <div class="s-img">
         <img src="../../static/img/scan_03.jpg">
       </div>
        <p>未扫描到二维码，点此反馈</p>
     </section>
     <div class="footer">
       <div>
         <img src="../../static/img/scan.jpg">
         <p>扫码</p>
       </div>
       <div>
         <img src="../../static/img/scan_07.jpg">
         <p>AR</p>
       </div>
     </div>
  </div>
  
</template>

<script>
export default {
 name:'users',
 data(){
     return{
      
     }
 },
 methods:{

     
 }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.users{
  background-color: black;
  width: 100%;
}
header{
  padding: 1.5rem;
  display: flex;
  justify-content:space-between;
}
span{
  color:#fff;
}
section{
  width: 100%;
}
.s-img{
    padding: 15% 15% 0 15%;
    color: #fff;
}
.s-img>img{
  width: 100%;
}
section>p{
  width: 11rem;
  min-width: 11rem;
  text-align: center;
  border: 1px solid #999;
  color: #fff;
  margin: 1.5rem auto;
  padding: 0.5rem;
  border-radius: 1rem;
}
.footer{
  color: #fff;
  display: flex;
  justify-content: space-between;
  text-align: center;
    background-color: black;
  width: 60%;
  padding:0 20%;
  padding-top: 30%;
  padding-bottom: 5%;
}
.footer>div>img{
  width: 55%;
  height: 55%;
}
.footer>div>p{
  padding-top: 0.2rem;
}
.footer>div:first-child>p{
  color: rgb(73, 73, 250);
}
</style>